
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Loading加载</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.main{
			margin: 8px;
		}
		.nav{
			
		}
		.nav a{
			display: inline-block;
		    margin: 0 2px;
		    padding: 7px 16px;
		    outline: none;
		    text-decoration: none;
		    text-transform: uppercase;
		    letter-spacing: 1px;
		    font-weight: 700;
		    border-radius: 2px;
		    font-size: 14px;
		    border: 2px solid transparent;
		    color: #3366cc;
		}
		.nav a.active{
			border-color: #3366cc;
		}
		.loading{
			margin: 0 auto;
    		margin-top: 100px;
    		display: none;
		}
		.loading.show{
			display: block;
		}
		.loading span{
			display: inline-block;
		}
		.loading span:nth-child(1){
			-webkit-animation-delay:0.13s;
			animation-delay:0.13s;
		}
		.loading span:nth-child(2){
			-webkit-animation-delay:0.26s;
			animation-delay:0.26s;
		}
		.loading span:nth-child(3){
			-webkit-animation-delay:0.39s;
			animation-delay:0.39s;
		}
		.loading span:nth-child(4){
			-webkit-animation-delay:0.52s;
			animation-delay:0.52s;
		}
		.loading span:nth-child(5){
			-webkit-animation-delay:0.65s;
			animation-delay:0.65s;
		}
		.loading span:nth-child(6){
			-webkit-animation-delay:0.78s;
			animation-delay:0.78s;
		}
		.loading span:nth-child(7){
			-webkit-animation-delay:0.91s;
			animation-delay:0.91s;
		}
		.loading span:nth-child(8){
			-webkit-animation-delay:1.04s;
			animation-delay:1.04s;
		}
		.loading1{
			width: 80px;
    		height: 40px;
		}
		.loading1 span{
		    width: 8px;
		    height: 100%;
		    border-radius: 4px;
		    background: lightblue;
		    -webkit-animation: load1 0.65s ease infinite;
		    animation: load1 1s ease infinite;
		}
		@-webkit-keyframes load1{
			0%,100%{
				height: 40px;
				background: lightblue;
			}
			50%{
				height: 70px;
				margin: -15px 0;
				background: lightgreen;
			}
		}
		.loading2{
			width: 150px;
    		height: 15px;
		}
		.loading2 span{
		    width: 15px;
		    height: 100%;
		    margin-right: 5px;
		    border-radius: 50%;
		    background: lightblue;
		    -webkit-animation: load2 0.65s ease infinite;
		}
		@-webkit-keyframes load2{
			0%{
				opacity: 1;
			}
			100%{
				opacity: 0;
			}
		}
		.loading3{
			width: 100px;
			height: 100px;
			position: relative;
		}
		.loading3 span{
		    width: 16px;
			height: 16px;
			border-radius: 50%;
			background: lightblue;
			position: absolute;
			-webkit-animation: load3 1.04s ease infinite;
		}
		@-webkit-keyframes load3{
			0%{
				opacity: 1;
			}
			100%{
				opacity: 0.2;
			}
		}
		.loading3 span:nth-child(1){
			left: 0;
			top: 50%;
			margin-top:-8px;
		}
		.loading3 span:nth-child(2){
			left: 14px;
			top: 14px;
		}
		.loading3 span:nth-child(3){
			left: 50%;
			top: 0;
			margin-left: -8px;
		}
		.loading3 span:nth-child(4){
			top: 14px;
			right:14px;
		}
		.loading3 span:nth-child(5){
			right: 0;
			top: 50%;
			margin-top:-8px;
		}
		.loading3 span:nth-child(6){
			right: 14px;
			bottom:14px;
		}
		.loading3 span:nth-child(7){
			bottom: 0;
			left: 50%;
			margin-left: -8px;
		}
		.loading3 span:nth-child(8){
			bottom: 14px;
			left: 14px;
		}
		.loading4{
			width: 100px;
			height: 100px;
			position: relative;
		}
		.loading4 span{
		   	width: 30px;
			height: 10px;
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
			background: lightblue;
			position: absolute;
			-webkit-animation: load4 1.04s ease infinite;
		}
		@-webkit-keyframes load4{
			0%{
				opacity: 1;
			}
			100%{
				opacity: 0;
			}
		}
		.loading4 span:nth-child(1){
			left: 0;
			top: 50%;
			margin-top:-5px;
		}
		.loading4 span:nth-child(2){
			left: 10px;
			top: 20px;
			-webkit-transform: rotate(45deg);
		}
		.loading4 span:nth-child(3){
			left: 50%;
			top: 10px;
			margin-left: -15px;
			-webkit-transform: rotate(90deg);
		}
		.loading4 span:nth-child(4){
			top: 20px;
			right:10px;
			-webkit-transform: rotate(135deg);
		}
		.loading4 span:nth-child(5){
			right: 0;
			top: 50%;
			margin-top:-5px;
			-webkit-transform: rotate(180deg);
		}
		.loading4 span:nth-child(6){
			right: 10px;
			bottom:20px;
			-webkit-transform: rotate(225deg);
		}
		.loading4 span:nth-child(7){
			bottom: 10px;
			left: 50%;
			margin-left: -15px;
			-webkit-transform: rotate(270deg);
		}
		.loading4 span:nth-child(8){
			bottom: 20px;
			left: 10px;
			-webkit-transform: rotate(315deg);
		}
		.loading5{
			width: 100px;
			height: 100px;
			position: relative;
		}
		.loading5 div{
			width: 100%;
			height: 100%;
			position: absolute;
			-webkit-animation: load5 2.08s linear infinite;
		}
		.loading5 div span{
		   	width: 20px;
			height: 20px;
			border-radius: 50%;
			background: lightblue;
			position: absolute;
			left: 50%;
			margin-top: -10px;
			margin-left: -10px;
		}
		@-webkit-keyframes load5{
			0%{
				-webkit-transform: rotate(0deg);
			}
			10%{
				-webkit-transform: rotate(45deg);
			}
			50%{
				opacity: 1;
				-webkit-transform: rotate(160deg);
			}
			62%{
				opacity: 0;
			}
			65%{
				opacity: 0;
				-webkit-transform: rotate(200deg);
			}
			90%{
				-webkit-transform: rotate(340deg);
			}
			100%{
				-webkit-transform: rotate(360deg);
			}
		}
		.loading5 div:nth-child(1){
			-webkit-animation-delay:0.2s;
		}
		.loading5 div:nth-child(2){
			-webkit-animation-delay:0.4s;
		}
		.loading5 div:nth-child(3){
			-webkit-animation-delay:0.6s;
		}
		.loading5 div:nth-child(4){
			-webkit-animation-delay:0.8s;
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="nav">
			<a href="javascript:;" class="active">DEMO 1</a>
			<a href="javascript:;">DEMO 2</a>
			<a href="javascript:;">DEMO 3</a>
			<a href="javascript:;">DEMO 4</a>
			<a href="javascript:;">DEMO 5</a>
		</div>
		<div class="content">
			<div class="loading loading1 show">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="loading loading2">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="loading loading3">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="loading loading4">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
			<div class="loading loading5">
				<div><span></span></div>
				<div><span></span></div>
				<div><span></span></div>
				<div><span></span></div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../common/jquery.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript">
	$.btnChoiceView($(".nav a"), $(".loading"));
</script>
</html>